import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Cell, Input, NavBar, hooks, Toast, Button } from 'react-vant'
import { Divider } from 'antd-mobile'

import { Form } from 'antd-mobile'

import './login.css'
import './a.css'
import 'animate.css';
import '../../rem.js'

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8000/login'

export default function Login() {
    const [state, updateState] = hooks.useSetState({
        username: '',
        password: '',
    })

    const Navigate = useNavigate()

    const getLogin = async () => {
        let { data: { code, loginId, token } } = await axios.post('http://127.0.0.1:3000/logins/login', state)
        if (code == 200) {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            })
            localStorage.setItem('item', loginId)
            sessionStorage.setItem('token', token)
            // Navigate('/main')
            alert("成功")
        } else if (code == 401) {
            Toast('用户名错误~')
        }else if(code == 400){
            Toast('密码错误~')
        }
    }


    return (
        // 
        <div className="animate__animated animate__backInLeft">
            <div className='div1'>
                <img style={{}} width="80rem" height="80rem" src='../../public/明日花坊.jpg'></img>
                <p >明日花坊</p>
            </div>

            <div className='formBox'>
                <Form layout='horizontal' >
                    <Form.Item label='账号' name='username' >
                        <Input placeholder='请输入手机号码' value={state.username}
                            onChange={username => updateState({ username })} clearable />
                    </Form.Item>
                    <Form.Item label='密码' name='password'>
                        <Input placeholder='请输入密码' value={state.password}
                            onChange={password => updateState({ password })} clearable />
                    </Form.Item>
                
                    <Button className='button1' onClick={() => { getLogin() }} align="center">登录</Button>
                    
                </Form>
            </div>
            


            <div className='loginBottomBox'>
                <span onClick={()=>{Navigate('/forget')}}>忘记密码</span>
                &nbsp;&nbsp;&nbsp;&nbsp;<Divider style={{fontSize:'40px',background:"gray"}} direction='vertical' />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                
                <span onClick={()=>{Navigate('/register')}}>立即注册</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Divider style={{fontSize:'40px',background:"gray"}} direction='vertical' />&nbsp;&nbsp;&nbsp;&nbsp;
               
                <span onClick={() => { Navigate('/face') }}>人脸登录</span>
            </div>
        </div>
    )
}
